<template>
    <div class="box">
        <!-- 视口容器 -->
        <div class="container" ref="container"></div>
    </div>

</template>

<script setup lang="ts">
import { nextTick, ref } from 'vue';
import { getobjm } from '../scripts/getobjm';
import { ESJVector2D, ESUnrealActor, ESWidget } from 'earthsdk3';
import { ESUeViewer } from 'earthsdk3-ue';

const objm = getobjm();
const container = ref<HTMLDivElement>();
const hightlight = objm.createSceneObject(ESUnrealActor)
const widget = objm.createSceneObject(ESWidget)

nextTick(() => {
    if (!container.value) return;
    // 视口创建完成事件监听
    objm.viewerCreatedEvent.don((v) => {
        const viewer = v as ESUeViewer;
        // 点击拾取事件监听
        viewer.clickEvent.don((e) => {
            if (!e) return
            // 鼠标点击调用pick事件
            viewer.pick(e.screenPosition as ESJVector2D, 'customPick').then(res => {
                if (!res) return
                const result = res.pickResult
                const tags = res.pickResult.actorTags
                if (tags.length > 0) {
                    viewer.getObjectByInfo({ actorTag: tags[tags.length - 1] }).then(res => {
                        if (!(res && res.object && hightlight)) return
                        // 绑定actor设置高亮
                        const { position, rotation, actorTag } = res.object
                        hightlight.actorTag = actorTag
                        hightlight.position = position
                        hightlight.rotation = rotation
                        hightlight.highlight = true
                        // 显示属性面板
                        if (widget) {
                            result.position[2] = result.position[2] + 3
                            widget.position = result.position
                            result.assetUserData.title = "属性信息"
                            widget.info = renameElementKeys(result.assetUserData)
                        }
                    })


                }

            })
        })
    })
    // 创建视口
    const viewer = objm.createUeViewer(container.value, "http://localhost:9007/", "hanyang_liangchang");
    // 设置当前时间
    viewer.currentTime = 1746331200000
})


/**
 * 去掉Element*前缀（这个前缀是datasmith导入UE之后自带得，从UE中一个一个删除太耗费人工）
 * @param data 
 */
function renameElementKeys(data: Record<string, any>): Record<string, any> {
    const result: Record<string, any> = {};
    for (const key in data) {
        const newKey = key.replace('Element*', '');
        result[newKey] = data[key];
    }
    return result;
}




</script>
<style scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}

.btn-box {
    height: 50px;
    position: absolute;
    left: 0px;
    top: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    z-index: 1;
}

.container {
    width: 100%;
    height: 100%;
    position: relative;
}

botton {
    padding: 0 10px;
    height: 30px;
    margin: 10px;
    background-color: #01fa7d8c;
    border: 1px solid #01fa7d8c;
    border-radius: 5px;
    cursor: pointer;
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
}
</style>
